<template>
	<view class="profile">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="userProfile.avatarUrl"></image>
		</button>
		<view class="nickname-wrapper">
			<label for="">昵称:</label>
			<input type="nickname" @blur="onBlur" :value="userProfile.nickName" />
		</view>
		<van-button type="primary" block @click="saveProfile">确认</van-button>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	computed: {
		...mapState('m_user', ['userProfile'])
	},
	methods: {
		onChooseAvatar(e) {
			this.userProfile.avatarUrl = e.detail.avatarUrl
		},
		onBlur(e) {
			this.userProfile.nickName = e.detail.value
		},
		saveProfile() {
			this.$store.commit('m_user/saveProfile', this.userProfile)
			// 返回上一页
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.profile {
	padding: 0 40rpx;
}

.avatar-wrapper {
	padding: 0;
	width: 112rpx;
	border-radius: 16rpx;
	margin-top: 80rpx;
	margin-bottom: 120rpx;

	&::after {
		content: '';
		border: none;
	}

	.avatar {
		display: block;
		width: 112rpx;
		height: 112rpx;
	}
}

.nickname-wrapper {
	display: flex;
	align-items: center;
	height: 80rpx;
	border-bottom: 1rpx solid #eee;
	margin-bottom: 40rpx;

	label {
		width: 100rpx;
		color: #333;
		font-size: 34rpx;
	}

	input {
		color: #666;
		font-size: 34rpx;
	}
}
</style>
